<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <title>微信授权登陆</title>
    <link rel="stylesheet" href="__CDN__/assets/addons/mplogin/css/mobile.css">
    <script src="__CDN__/assets/libs/jquery/dist/jquery.min.js"></script>
    <script src="__CDN__/assets/libs/art-template/dist/template.js"></script>
    <script src="__CDN__/assets/addons/mplogin/js/mobile.js"></script>
</head>
<body>
<div id="content">

</div>
<script id="tpl" type="text/template">
    <% if state==-2 %>
    <div class="qrcode" style="">
        <img src="__CDN__/assets/addons/mplogin/img/imac.png">
    </div>
    <div class="tip">
        <p class="p1"><% msg %></p>
        <p class="p2"><% data %></p>
    </div>
    <div class="submit">
        <!-- <div class="item"><a class="button" href="javascript:chose({state:4});">立即绑定</a></div> -->
        <div class="item"><a class="cancel" href="javascript:WeixinJSBridge.call('closeWindow');">取消</a></div>
    </div>
    <% else if state==-3 %>
    <div class="qrcode" style="">
        <img src="<% data %>">
    </div>
    <div class="tip">
        <p class="p1">您尚未关注此公众号</p>
        <p class="p2">请长按识别图片的二维码</p>
    </div>
    <% else if state==3 %>
    <div class="qrcode" style="">
        <img src="__CDN__/assets/addons/mplogin/img/imac.png">
    </div>
    <div class="tip">
        <p class="p1">微信授权确认</p>
        <p class="p2">允许 <% data %> 登陆网站</p>
    </div>
    <div class="submit">
        <div class="item"><a class="button" href="javascript:login('{$sure_url}')">登陆</a></div>
        <!-- <div class="item"><a class="cancel" href="javascript:unbind(this)">解除绑定</a></div> -->
        <div class="item"><a class="cancel" href="javascript:WeixinJSBridge.call('closeWindow');">取消登陆</a></div>
    </div>
    <% else if state==4 %>
    <div class="login">
        <div class="qrcode" style="padding: 30px 0">
            <img src="__CDN__/assets/addons/mplogin/img/login.png" style="width: 30%">
        </div>
        <form id="bind_form" onsubmit="return false">
            {:token()}
            <div class="item">
                <span>账号</span> <input name="username" type="text"/>
            </div>
            <div class="item">
                <span>密码</span> <input name="password" type="password"/>
            </div>
        </form>
        <div class="button">
            <button onclick="submit('{$bind_url}',this)" type="button">立即绑定</button>
        </div>
    </div>
    <% else if state==2 %>
    <div class="qrcode" style="padding: 30px 0">
        <img src="__CDN__/assets/addons/mplogin/img/ok.png" style="width: 30%">
    </div>
    <div class="tip">
        <p class="p1"><% msg %></p>
    </div>
    <% else  %>
    <div class="qrcode" style="">
        <img src="__CDN__/assets/addons/mplogin/img/imac.png">
    </div>
    <div class="tip">
        <p class="p1">微信授权确认</p>
        <p class="p2">允许 <%data%> 登陆网站</p>
    </div>
    <div class="submit">
        <div class="item"><p style="color: red"> <% msg %> </p></div>
    </div>
    <% /if %>
</script>
<script>
    chose({$state});

    function submit(url, obj) {
        var value = $("#bind_form").serializeArray();
        if ($("input[name=username]").val().trim() == '') {
            alert("账号不能为空");
            return false;
        }
        if ($("input[name=password]").val().trim() == '') {
            alert("密码不能为空");
            return false;
        }
        $(obj).attr("disabled", true);
        $.post("{$bind_url}", value, function (result) {
            if (result.state == 1) {
                chose({state: 2, msg: result.msg});
            } else {
                if(result.data)$("input[name='__token__']").val(result.data);
                alert(result.msg);
                $(obj).removeAttr("disabled");
            }
        });
    }


    function unbind(obj) {
        $.post("{$unbind_url}", '', function (result) {
            if (result.state == 1) {
                chose({state: 2, msg: result.msg});
            } else {
                alert(result.msg)
                $(obj).removeAttr("disabled");
            }
        });
    }
</script>
</body>
</html>